<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../css/global.css">
    </head>
    <body style="text-align: center;">
        <div>
            <h2>JavaScript 能做什么</h2>

            <!-- 1.能够改变 HTML 内容 -->
            <div>
                <p id="demo">1.JavaScript 能够改变 HTML 内容。</p>
                <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
            </div>
            
            <!-- 2.能够改变 HTML 属性值 -->
            <div>
                <p>2.JavaScript 能够改变 HTML 属性值。</p>
                <p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
                <button onclick="document.getElementById('myImage').src='../image/eg_bulbon.gif'">开灯</button>
                <img id="myImage" border="0" src="../image/eg_bulboff.gif" style="text-align:center;">
                <button onclick="document.getElementById('myImage').src='../image/eg_bulboff.gif'">关灯</button>
            </div>
            
            <!-- 3.能够改变 HTML 元素的样式 -->
            <div>
                <p id="html_style">3.JavaScript 能够改变 HTML 元素的样式。</p>
                <button type="button" onclick="document.getElementById('html_style').style.fontSize='35px'">点击我！</button>
            </div>
            
            <!-- 4.能够隐藏 HTML 元素 -->
            <div>
                <p id="html_style_hide">4.JavaScript 能够隐藏 HTML 元素。</p>
                <button type="button" onclick="document.getElementById('html_style_hide').style.display='none'">点击我！</button>
            </div>
            
            <!-- 5.能够显示隐藏的 HTML 元素 -->
            <p>5.JavaScript 能够显示隐藏的 HTML 元素。</p>
            <p id="html_style_show" style="display:none">Hello JavaScript!</p>
            <button type="button" onclick="document.getElementById('html_style_show').style.display='block'">
            点击我！
            </button>
        </div>
    </body>
</html>
